<template>
  <!-- 用户管理 -->
  <div>
    <div class="form-row">
      <div class="form-item">
        <span>状态：</span>
        <el-select v-model="value" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="form-item">
        <span>姓名：</span>
        <el-input v-model="username" placeholder="请输入姓名" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>账号：</span>
        <el-input v-model="account" placeholder="请输入账号" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>手机号：</span>
        <el-input v-model="telephone" placeholder="请输入手机号" style="width: 150px"></el-input>
      </div>

      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="success" @click="handleReset">重置</el-button>

    </div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 0 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="姓名">
      </el-table-column>
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号">

      </el-table-column>

      <el-table-column prop="headIcon" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.headIcon">
            
          </el-avatar>
        </template>
      </el-table-column>
      <!-- 操作列宽度设置为150px -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="openResetPasswordDialog(scope.row)" type="text" size="small">重置密码</el-button>
          <el-button type="text" size="small">封禁</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页组件：左对齐并距离表格10px -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>

    <!-- 重置密码确认弹窗 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetPasswordDialogVisible"
      width="30%"
      :close-on-click-modal="false">
      <div>
        <p>是否确定将该用户的密码重置为"123456"？</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmResetPassword">确定</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
import { selectByCondition, resetPassword } from "@/api/user";
export default {
  methods: {
    // 打开重置密码弹窗
    openResetPasswordDialog(row) {
      this.selectedUser = row; // 保存当前选中的用户信息
      this.resetPasswordDialogVisible = true; // 显示弹窗
    },

    // 确认重置密码
    async confirmResetPassword() {
      if (!this.selectedUser) {
        this.$message.error("未获取到用户信息");
        return;
      }

      try {
        // 构造参数，假设后端需要用户ID，根据实际情况调整参数名
        const params = {
          userId: this.selectedUser.id // 假设用户对象中有id字段作为唯一标识
        };

        // 调用重置密码接口
        await resetPassword(params);
        
        // 提示成功信息
        this.$message.success("密码重置成功，新密码为123456");
        // 关闭弹窗
        this.resetPasswordDialogVisible = false;
      } catch (error) {
        console.error("密码重置失败:", error);
        this.$message.error("密码重置失败，请稍后重试");
      }
    },

    handleClick(row) {
      console.log(row);
    },

    // 查询按钮点击事件
    handleSearch() {
      const params = {
        status: this.value,
        username: this.username,
        account: this.account,
        telephone: this.telephone
      };
      this.loadData(params);
    },

    // 重置按钮点击事件
    handleReset() {
      this.value = '';
      this.username = '';
      this.account = '';
      this.telephone = '';
      this.loadData({});
    },

    // 加载数据方法
    async loadData(params) {
      try {
        const response = await selectByCondition(params);
        this.tableData = response.data || [];
      } catch (error) {
        console.error("数据加载失败:", error);
        this.$message.error("加载数据失败，请稍后重试");
      }
    }

  },

  created() {
    this.loadData({});
  },

  data() {
    return {
      username: '',
      account: '',
      telephone: '',
      value: '',
      resetPasswordDialogVisible: false, // 控制重置密码弹窗显示/隐藏
      selectedUser: null, // 存储当前选中的用户信息

      options: [{
        value: 0,
        label: '启用'
      }, {
        value: 1,
        label: '禁用'
      }],

      tableData: []
    }
  }

}
</script>


<style scoped>
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.form-item {
  display: flex;
  align-items: center;
}

.form-item span {
  margin-right: 8px;
  white-space: nowrap;
}

.pagination-left {
  margin-top: 10px;
  text-align: left;
}
</style>
    